<template>
  <div class="copy-for-select">
    <div>
      <van-row type="flex" align="center" justify="space-between">
        <span class="title">抄送设置</span>
        <van-icon class="add-icon" color="#CCCCCC" name="add-o" @click="onAddClick" size="20"/>
      </van-row>
      <van-row class="copy-type-box" type="flex" align="center" style="padding-bottom: 0px; padding-top: 16px;"
        v-for="typeGroup in copyForDataList" :key="typeGroup.type"
      >
        <van-col :span="24" style="margin-bottom: 10px;">
          <van-row type="flex" justify="space-between" align="center" style="width: 100%;">
            <p class="copyType">{{ getTypeName(typeGroup.type) }}</p>
            <i class="mobile-font icon-remove" style="color: #FF5219; font-size: 20px;" @click="deleteCoyForItem(typeGroup.type)" />
          </van-row>
        </van-col>
        <van-col class="copyItem" v-for="data in typeGroup.dataList" :key="data.id">
          <img class="copyItem-avatar" :src="data.headImageUrl" v-if="data.headImageUrl">
          <span>{{data.name}}</span>
          <van-icon class="copyItem-del" name="cross" color="#171A1D" @click="deleteCoyForItem(typeGroup.type, data)" />
        </van-col>
      </van-row>
    </div>
    <van-popup v-model="popupShow" get-container="body">
      <EditCopyForItem v-if="popupShow"
        style="width: 100vw; height: 100vh;"
        :selectedData="selectData"
        :roleList="roleList"
        :deptList="deptList"
        :postList="postList"
        :deptPostList="deptPostList"
        @close="onClosePopup"
      />
    </van-popup>
  </div>
</template>

<script>
import { SysCommonBizController } from '@/api';
import EditCopyForItem from './editCopyForItem.vue';
import { megerList } from '@/utils';
export default {
  name: 'copyForSelect',
  components: {
    EditCopyForItem
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      popupShow: false,
      roleList: [],
      deptList: [],
      postList: [],
      deptPostList: [],
      selectData: {},
      closeIcon: require('@/assets/icon/close-icon.png')
    }
  },
  mounted() {
    this.loadSysRoleList();
    this.loadSysDeptList();
    this.loadSysPostList();
    this.loadDeptPostList();
  },
  methods: {
    getTypeName (type) {
      return this.SysFlowCopyForType.getValue(type);
    },
    onAddClick() {
      this.popupShow = true
    },
    updateEditCopyForItem (data) {
      let copyForType = data.type;
      // 按照抄送类型更新
      if (this.selectData[copyForType] == null) this.selectData[copyForType] = [];
      this.selectData[copyForType] = megerList(this.selectData[copyForType], data.value, 'id');
      this.selectData = {
        ...this.selectData
      }
      this.onValueChange();
    },
    onValueChange() {
      let value = Object.keys(this.selectData).reduce((retObj, key) => {
        let temp = this.selectData[key];
        if (temp != null && Array.isArray(temp)) {
          retObj.push({
            type: key,
            id: temp.map(item => item.id).join(',')
          });
        }
        return retObj;
      }, []);
      this.$emit('input', value);
    },
    onClosePopup (data) {
      this.popupShow = false;
      if (data) this.updateEditCopyForItem(data);
    },
    deleteCoyForItem (type, data) {
      if (type != null && this.selectData[type] != null) {
        if (data != null) {
          this.selectData[type] = this.selectData[type].filter(item => item !== data);
        } else {
          this.selectData[type] = undefined;
        }
      }
      this.onValueChange();
    },
    loadSysDeptList() {
      let params = {
        widgetType: 'upms_dept',
        filter: {}
      };
      SysCommonBizController.list(this, params, null, {
        showMask: false
      }).then(res => {
        if (res.data.dataList == null) res.data.dataList = [];
        this.deptList = res.data.dataList.map(item => {
          return {
            id: String(item.deptId),
            name: item.deptName,
            ...item
          };
        });
      }).catch(e => { });
    },
    loadSysPostList() {
      this.postMap = new Map();
      let params = {
        widgetType: 'upms_post',
        filter: {}
      };
      SysCommonBizController.list(this, params, null, {
        showMask: false
      }).then(res => {
        if (res.data.dataList == null) res.data.dataList = [];
        this.postList = res.data.dataList.map(item => {
          return {
            id: String(item.postId),
            name: item.postName,
            ...item
          };
        });
      }).catch(e => { });
    },
    loadDeptPostList() {
      let params = {
        widgetType: 'upms_dept_post',
        filter: {}
      };
      SysCommonBizController.list(this, params, null, {
        showMask: false
      }).then(res => {
        if (res.data.dataList == null) res.data.dataList = [];
        this.deptPostList = res.data.dataList.sort((value1, value2) => {
          return value1.postLevel - value2.postLevel;
        });
      }).catch(e => { });
    },
    loadSysRoleList() {
      let params = {
        widgetType: 'upms_role',
        filter: {}
      };
      SysCommonBizController.list(this, params, null, {
        showMask: false
      }).then(res => {
        if (res.data.dataList == null) res.data.dataList = [];
        this.roleList = res.data.dataList.map(item => {
          return {
            id: String(item.roleId),
            name: item.roleName,
            ...item
          }
        });
      }).catch(e => { });
    }
  },
  computed: {
    copyForDataList() {
      return Object.keys(this.selectData).map(key => {
        if (key != null && Array.isArray(this.selectData[key])) {
          return {
            type: key,
            dataList: this.selectData[key]
          }
        } else {
          return null;
        }
      }).filter(item => item != null);
    }
  }
}
</script>

<style scoped>
.copyType{
  color: #333333;
  font-size: 16px;
  font-weight: 400;
}
.copyItem{
  background: #F6F7F9;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #171A1D;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.copyItem span{
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  color: #171A1D;
}
.copyItem-avatar{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
}
.copyItem-del{
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
}
.popup{
  width: 90vw;
  padding: 20px 5px;
}
  .copy-for-select {
    border-radius: 8px;
    background: white;
    padding: 16px;
  }

  .copy-for-select .title {
    font-weight: bold;
    color: #333333;
    line-height: 20px;
    height: 20px;
    font-size: 16px;
  }

  .copy-for-select .add-icon {
    color: #CCCCCC;
    font-size: 16px;
  }

  .copy-type-box + .copy-type-box {
    border-top: 1px solid #E5E5E5;
  }
</style>
